<template>
    <div class="ms-border-content" :style="{width:width,height:height}">
        <div class="ms-bor-title">
            <h2>
                <img :src="imgUrl">
                <span>{{title}}</span>
            </h2>
        </div>
        <div class="ms-content-box">
            <div class="ms-bor-left ms-bor-line"></div>
            <div class="ms-bor-right ms-bor-line"></div>
            <slot name="contentbox"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "slotcontent",
    /* 外部引入的值 */
    props: {
        title: {
            type: String,
            default: "内容框组件"
        },
        imgUrl: {
            type: String,
            default: "../"
        },
        width: {
            type: String,
            default: "100%"
        },
        height: {
            type: String,
            default: "600px"
        },
        minw: {
            type: String,
            default: ""
        }
    },
    data() {
        return {};
    },
    mounted() {},
    methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@keyframes animationLine {
    0% {
        height: 20px;
        top: 0;
        bottom: auto;
    }

    50% {
        height: 100%;
    }

    100% {
        top: auto;
        bottom: 0;
        height: 20px;
    
    }
}
// .ms-border-content {
//     background: url("../assets/msimages/index/right-top-arrow.png") no-repeat
//         right top;
// }
.ms-content-box {
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    border-bottom: 1px solid rgba($color: #ffffff, $alpha: 0.16);
    .ms-bor-line {
        position: absolute;
        top: 0px;
        height: 100%;
        width: 1px;
        background: rgba($color: #fff, $alpha: 0.25);
        &:after {
            content: "";
            position: absolute;
            width: 1px;
            left: 0;
            top: 50%;
            height: 27%;
            background: #00f6ff;
            min-height: 90px;
            transform: translateY(-50%);
        }
        &:before {
            content: "";
            position: absolute;
            left: 0;
            width: 1px;
            height: 5%;
            background: #00f6ff;
            top: 2%;
            animation: animationLine 4s infinite linear;
        }
        &.ms-bor-left {
            left: 0;
        }
        &.ms-bor-right {
            right: 0;
        }
    }
}
.ms-bor-title {
    font-size: 24px;
    color: #fff;
    border-bottom: 1px solid rgba($color: #fff, $alpha: 0.25);
    margin-bottom: 4px;
    h2 {
        font-weight: normal;
        &:after {
            content: "";
            display: table;
            clear: both;
        }
        position: relative;
        display: inline-block;
        &:before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: 100%;
            background: #04c1ff;
            margin-bottom: -7px;
        }
        img {
            margin-right: 6px;
            float: left;
        }
        span {
            position: relative;
            float: left;
            padding-left: 16px;
            &:after {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 1px;
                height: 16px;
                background: rgba($color: #fff, $alpha: 0.36);
            }
        }
    }
}
</style>
